<template>
  <f7-page>
    <f7-navbar title="消息">
    </f7-navbar>
    <f7-toolbar>
      <tab isActive3="true" />
    </f7-toolbar>
    <f7-block-title>
      <a>
        <img src="../../assets/img/video-img.jpg" class="img-responsive">
      </a>
    </f7-block-title>
    <f7-list media-list>
      <f7-list-item>
        <img slot="media" round src="../../assets/img/infor-icon.png" width="44" />
        <div class="item-title-row">
          <div class="item-title">公告通知</div>
        </div>
        <p class="The_article">定制企业版+企业数据中心，实现互联网战略升级！</p>
      </f7-list-item>
      <f7-list-item>
        <img slot="media" round src="../../assets/img/recieve.png" width="44" />
        <div class="item-title-row">
          <div class="item-title">收到的申请</div>
          <div class="item-after">2018年07月26日</div>
        </div>
        <p class="The_article">暂无消息</p>
      </f7-list-item>
      <f7-list-item>
        <img slot="media" round src="../../assets/img/send.png" width="44" />
        <div class="item-title-row">
          <div class="item-title">已发起的申请</div>
          <div class="item-after">2018年07月26日</div>
        </div>
        <p class="The_article">暂无消息</p>
      </f7-list-item>
      <f7-list-item :title="itm.real_name" subtitle="你好吗" v-for="itm in colleague" @click="goConnect(itm)">
        <img slot="media" round :src="itm.photo_url" width="44" />
      </f7-list-item>
    </f7-list>





   





  </f7-page>
</template>

<script>
import tab from '../../components/tab.vue'
import F7Block from 'framework7-vue/src/components/block'

export default {
  name: 'app',
  data () {
    return {
      colleague: []
    }
  },
  components: {
    F7Block,
    tab
  },
  methods: {
    goConnect (item) {
      let param = {
        userId: item._id,
        userRole: item.role,
        role: this.Storage.get('user').user.role
      }
      window.cordova.plugins.yimPlugin.chat(param.userId, 0, param.role, param.userRole, '0xA2A2F0', function (success) {
        console.log('云信Chat成功', success)
      }, function () {
        console.log('云信Chat失败')
      })
    }
  },
  async mounted () {
    let param = { page: 1 }
    let getColleagueRes = await this.AccountService.getColleague(param)
    this.colleague = getColleagueRes.data.data.list
  }
}

</script>

<style scoped>
.ios .block-title {
  margin: 10px 0px 0px 0px;
  background: #fff;
}
.ios .page {
  background: #fff;
}
.ios .list {
  margin-top: 0;
  margin-bottom: 0;
}
.ios .media-list .item-title,
.ios li.media-item .item-title {
  font-size: 16px;
  font-weight: 500;
  color: #000;
  display: initial;
}
.ios .list .item-after {
  color: #8e8e93;
  padding-left: 5px;
  font-size: 12px;
}
.The_article {
  width: 286px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  color: #999;
  display: inherit;
  margin: 0;
  margin-top: 4px;
}
.media-list .item-media img {
  max-width: 48px;
  max-height: 48px;
  border-radius: 50%;
}
.ios .list .item-subtitle {
    font-size: 14px;
     color: #999;
}
</style>
